<template>
  <div class="dataList-container">
    <el-card class="title" style="height: 60px">
      <slot name="title">无标题</slot>
    </el-card>
    <el-card :body-style="{ height: 'calc(100% - 200px)' }">
      <template #header>
        <div class="search">
          <div class="search-left" id="searchScrollable">
            <slot name="headerLeft">
              <div></div>
            </slot>
          </div>
          <div class="search-right">
            <slot name="headerRight">
              <div></div>
            </slot>
          </div>
        </div>
      </template>
      <el-table size="large" :data="arrRef" stripe height="100%" highlight-current-row>
        <slot> </slot>
      </el-table>
      <template #footer>
        <div class="footer-content">
          <el-pagination
            background
            size="small"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="totalRef"
            :current-page="pageNumRef"
            :page-size="pageSizeRef"
            :page-sizes="[10, 20, 30, 50, 100]"
            @size-change="pageSizeChange"
            @current-change="pageNumChange"
          />
        </div>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
/**
 * 页码改变方法模板
 */
/*
const pageNum = ref(1)
const pageSize = ref(10)
function pageChange(num: number, size: number) {
  pageNum.value = num
  pageSize.value = size
  getData()
}
*/

const props = defineProps({
  arr: {
    type: (Array as PropType<unknown[]>) || undefined,
    required: true
  },
  total: {
    type: Number,
    required: true
  },
  pageNum: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    required: true
  }
})

// 列表数据
const arrRef = computed(() => props.arr)

// 分页参数
const totalRef = computed(() => props.total)
const pageNumRef = computed(() => props.pageNum)
const pageSizeRef = computed(() => props.pageSize)

// 定义时间
const emit = defineEmits(['pageChange'])
function pageSizeChange(size: number) {
  emit('pageChange', pageNumRef.value, size)
}
function pageNumChange(num: number) {
  emit('pageChange', num, pageSizeRef.value)
}

onMounted(() => {
  const scrollable = window.document.getElementById('searchScrollable')
  scrollable?.addEventListener('wheel', function (event) {
    if (event.deltaY !== 0) {
      scrollable.scrollLeft += event.deltaY
      event.preventDefault()
    }
  })
})
</script>

<style lang="scss" scoped>
.dataList-container {
  width: 100%;
  height: 100%;

  .title {
    margin-bottom: 13px;
    font-size: 18px;
    font-weight: 600;
  }
  .el-card {
    height: calc(100% - 77px);
  }
  :deep(.el-card__footer) {
    border: none;
  }
  .footer-content {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .search {
    width: 100%;
    position: relative;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;

    :deep(.el-form-item) {
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .search-left {
      width: 75%;
      display: flex;
      overflow-x: auto; /* 横向滚动 */
      white-space: nowrap;
      scrollbar-width: none; /* 适用于 Firefox */
      :deep(.el-form-item) {
        min-width: 200px;
        margin-right: 10px;
        font-size: 15px;
      }
    }

    .search-right {
      min-width: 200px;
      width: 20%;
      background-color: #fff;
      :deep(.el-form-item) {
        min-width: 200px;
        margin-right: 10px;
        font-size: 15px;
      }
    }
  }

  .bLeft::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
}
</style>
